<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="申请开始时间" prop="start_time">
				<el-date-picker v-model="queryParams.start_time" type="date" clearable value-format="X" placeholder="请选择开始时间" />
			</el-form-item>
			<el-form-item label="申请结束时间" prop="end_time">
				<el-date-picker v-model="queryParams.end_time" type="date" clearable value-format="X" placeholder="请选择结束时间" />
			</el-form-item>
			<el-form-item label="申请用户ID" prop="user_id">
				<el-input v-model.number="queryParams.user_id" placeholder="请输入申请用户ID" clearable />
			</el-form-item>
			<el-form-item label="联系人" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入联系人" clearable />
			</el-form-item>
			<el-form-item label="联系人手机号" prop="mobile">
				<el-input v-model.number="queryParams.mobile" placeholder="请输入联系人手机号" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<el-col v-if="queryParams.status == '1'" :span="1.5">
				<el-button @click="onAudit" :disabled="multiple" type="primary" plain icon="el-icon-edit">审核</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button @click="onViewMerchantsBalance" :disabled="single" type="info" plain icon="el-icon-view">查看商户号余额</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-tabs type="border-card" @tab-click="getList" v-model="queryParams.status">
			<el-tab-pane label="待审核" name="1" />
			<el-tab-pane label="审核拒绝" name="2" />
			<el-tab-pane label="打款中" name="3" />
			<el-tab-pane label="打款完成" name="4" />
		</el-tabs>
		<el-tabs v-if="queryParams.status == '3'" @tab-click="getList" v-model="queryParams.type">
			<el-tab-pane label="打款中" name="0" />
			<el-tab-pane label="打款失败" name="1" />
		</el-tabs>
		<el-table :data="tableList" v-loading="loading" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="用户信息" align="center">
				<template #default="scope">
					ID：{{ scope.row.users.id }}<br />
					姓名：{{ scope.row.users.nickname }}<br />
					身份：{{ identityText(scope.row.identity) }}<br />
				</template>
			</el-table-column>
			<el-table-column label="联系人信息" align="center">
				<template #default="scope">
					联系人：{{ scope.row.name }}<br />
					手机号{{ scope.row.mobile }}<br />
				</template>
			</el-table-column>
			<el-table-column label="商户号" align="center" prop="mchid" />
			<el-table-column label="提现金额" align="center" prop="apply_money" />
			<el-table-column label="税率(%)" align="center" prop="tax_rate" />
			<el-table-column label="税费" align="center" prop="tax_money" />
			<el-table-column label="需打款金额" align="center" prop="need_remit_money" />
			<el-table-column label="状态" align="center">
				<template #default="scope">{{ distributorWithdrawalStatusText(scope.row.status) }}</template>
			</el-table-column>
			<el-table-column label="到账卡号" align="center" prop="bank_number" />
			<el-table-column label="申请时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.apply_time) }}</template>
			</el-table-column>
			<el-table-column label="进度结果" align="center">
				<template #default="scope">
					<el-link type="success" @click="onViewProgressResults(scope.row)">查看进度结果</el-link>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<distributor-withdrawal-audit-dialog ref="distributorWithdrawalAuditRef" />
		<merchants-balance-view-dialog ref="merchantsBalanceViewRef" />
		<progress-result-view-dialog ref="progressResultsViewRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { withdrawalApproved, withdrawalAuditRejection, withdrawalPaymentApproved, withdrawalToBeReviewed } from '/@/api/admin1';
import { distributorWithdrawalStatusText, endTimePlus, timeDictionary } from '/@/utils/dictionaryTranslation';

import DistributorWithdrawalAuditDialog from './dialog/DistributorWithdrawalAuditDialog.vue';
import MerchantsBalanceViewDialog from './dialog/MerchantsBalanceViewDialog.vue';
import ProgressResultViewDialog from './dialog/ProgressResultViewDialog.vue';

export default {
	name: 'financialDistributorWithdrawal',
	components: { DistributorWithdrawalAuditDialog, MerchantsBalanceViewDialog, ProgressResultViewDialog },
	setup() {
		const state = reactive({
			queryParams: {
				status: '1',
				type: '0',
				start_time: '',
				end_time: '',
				user_id: '',
				name: '',
				mobile: '',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 选中数组
			ids: [],
			showSearch: true,
			tableList: [],
			loading: false,
			total: 20,
		});

		const queryFormRef = ref(null);
		const distributorWithdrawalAuditRef = ref(null);
		const merchantsBalanceViewRef = ref(null);
		const progressResultsViewRef = ref(null);
		// 被选择的数据项
		let selectionInfo: Array<any> = [];

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 审核
		const onAudit = () => {
			let withdraw_ids = selectionInfo.map((item) => item.id).join(',');
			let apply_money = selectionInfo.reduce((acc, cur) => {
				return acc + Number(cur.apply_money);
			}, 0);
			let need_remit_money = selectionInfo.reduce((acc, cur) => {
				return acc + Number(cur.need_remit_money);
			}, 0);
			(distributorWithdrawalAuditRef.value as any)?.openDialog({ withdraw_ids, apply_money, need_remit_money }, () => getList());
		};
		// 查看商户号余额
		const onViewMerchantsBalance = () => {
			(merchantsBalanceViewRef.value as any)?.openDialog({
				...selectionInfo[0].users,
				user_id: selectionInfo[0].users.id,
				identityText: identityText(selectionInfo[0].identity),
			});
		};
		// 查看进度结果
		const onViewProgressResults = (row: any) => {
			(progressResultsViewRef.value as any)?.openDialog({ withdraw_id: row.id, payment_fail_reason: row.payment_fail_reason });
		};
		// 多选框选中数据
		const onSelectionChange = (selection: any) => {
			selectionInfo = selection;
			state.single = selection.length !== 1;
			state.multiple = !selection.length;
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			switch (Number(state.queryParams.status)) {
				case 1:
					_withdrawalToBeReviewed({
						...state.queryParams,
						end_time: endTimePlus(state.queryParams.start_time, state.queryParams.end_time),
					});
					break;
				case 2:
					_withdrawalAuditRejection({
						...state.queryParams,
						end_time: endTimePlus(state.queryParams.start_time, state.queryParams.end_time),
					});
					break;
				case 3:
					_withdrawalPaymentApproved({
						...state.queryParams,
						end_time: endTimePlus(state.queryParams.start_time, state.queryParams.end_time),
					});
					break;
				case 4:
					_withdrawalApproved({
						...state.queryParams,
						end_time: endTimePlus(state.queryParams.start_time, state.queryParams.end_time),
					});
					break;
			}
		};

		const identityText = (num: number) => {
			switch (num) {
				case 1:
					return '普通用户';
				case 2:
					return '物业管家';
				case 3:
					return '物业经理';
				default:
					return '未知状态';
			}
		};

		/********** 网络事件 **********/
		// 待审核列表
		const _withdrawalToBeReviewed = (_data: object) => {
			withdrawalToBeReviewed(_data)
				.then((res: any) => {
					console.log('待审核列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 审核拒绝列表
		const _withdrawalAuditRejection = (_data: object) => {
			withdrawalAuditRejection(_data)
				.then((res: any) => {
					console.log('审核拒绝列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 打款中列表
		const _withdrawalPaymentApproved = (_data: object) => {
			withdrawalPaymentApproved(_data)
				.then((res: any) => {
					console.log('打款中列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 打款完成列表
		const _withdrawalApproved = (_data: object) => {
			withdrawalApproved(_data)
				.then((res: any) => {
					console.log('打款完成列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			queryFormRef,
			distributorWithdrawalAuditRef,
			merchantsBalanceViewRef,
			progressResultsViewRef,
			onQuery,
			onResetQuery,
			onSelectionChange,
			onAudit,
			onViewMerchantsBalance,
			onViewProgressResults,
			getList,
			identityText,
			distributorWithdrawalStatusText,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
